<!DOCTYPE html>
<link rel="match" href="../expected/color-scheme-ref.html" />
<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-4638">
<style>
    body>div>div {
        padding: 1em;
        background-color: Canvas;
    }
</style>
<div style="display: flex">
    <div style="color-scheme: light">
        <div style="background: AccentColor; width: 10em; color: transparent">a</div>
        <div style="background: AccentColorText; width: 10em; color: transparent">a</div>
        <div style="background: ActiveText; width: 10em; color: transparent">a</div>
        <div style="background: ButtonBorder; width: 10em; color: transparent">a</div>
        <div style="background: ButtonFace; width: 10em; color: transparent">a</div>
        <div style="background: ButtonText; width: 10em; color: transparent">a</div>
        <div style="background: Canvas; width: 10em; color: transparent">a</div>
        <div style="background: CanvasText; width: 10em; color: transparent">a</div>
        <div style="background: Field; width: 10em; color: transparent">a</div>
        <div style="background: FieldText; width: 10em; color: transparent">a</div>
        <div style="background: GrayText; width: 10em; color: transparent">a</div>
        <div style="background: Highlight; width: 10em; color: transparent">a</div>
        <div style="background: HighlightText; width: 10em; color: transparent">a</div>
        <div style="background: LinkText; width: 10em; color: transparent">a</div>
        <div style="background: Mark; width: 10em; color: transparent">a</div>
        <div style="background: MarkText; width: 10em; color: transparent">a</div>
        <div style="background: SelectedItem; width: 10em; color: transparent">a</div>
        <div style="background: SelectedItemText; width: 10em; color: transparent">a</div>
        <div style="background: VisitedText; width: 10em; color: transparent">a</div>
        <div><button style="width: 10rem">Button</button></div>
        <div><button style="width: 10rem" disabled>Disabled</button></div>
        <div><input style="width: calc(10rem - 2px)" value="Input"></input></div>
        <div><input type="checkbox"></input><input type="checkbox" checked></input></div>
        <div><input type="checkbox" switch></input><input type="checkbox" switch checked></input></div>
        <div><input type="radio" name="lightradio"></input><input type="radio" name="lightradio" checked></input></div>
        <div><progress style="width: 10rem" value="70" max="100"></progress></div>
        <div><input type="range" style="width: 10rem" value="70" max="100"></input></div>
        <div style="color: light-dark(red,green)">light-dark(red,green)</div>
    </div>
    <div style="color-scheme: dark">
        <div style="background: AccentColor; width: 10em; color: transparent">a</div>
        <div style="background: AccentColorText; width: 10em; color: transparent">a</div>
        <div style="background: ActiveText; width: 10em; color: transparent">a</div>
        <div style="background: ButtonBorder; width: 10em; color: transparent">a</div>
        <div style="background: ButtonFace; width: 10em; color: transparent">a</div>
        <div style="background: ButtonText; width: 10em; color: transparent">a</div>
        <div style="background: Canvas; width: 10em; color: transparent">a</div>
        <div style="background: CanvasText; width: 10em; color: transparent">a</div>
        <div style="background: Field; width: 10em; color: transparent">a</div>
        <div style="background: FieldText; width: 10em; color: transparent">a</div>
        <div style="background: GrayText; width: 10em; color: transparent">a</div>
        <div style="background: Highlight; width: 10em; color: transparent">a</div>
        <div style="background: HighlightText; width: 10em; color: transparent">a</div>
        <div style="background: LinkText; width: 10em; color: transparent">a</div>
        <div style="background: Mark; width: 10em; color: transparent">a</div>
        <div style="background: MarkText; width: 10em; color: transparent">a</div>
        <div style="background: SelectedItem; width: 10em; color: transparent">a</div>
        <div style="background: SelectedItemText; width: 10em; color: transparent">a</div>
        <div style="background: VisitedText; width: 10em; color: transparent">a</div>
        <div><button style="width: 10rem">Button</button></div>
        <div><button style="width: 10rem" disabled>Disabled</button></div>
        <div><input style="width: calc(10rem - 2px)" value="Input"></input></div>
        <div><input type="checkbox"></input><input type="checkbox" checked></input></div>
        <div><input type="checkbox" switch></input><input type="checkbox" switch checked></input></div>
        <div><input type="radio" name="darkradio"></input><input type="radio" name="darkradio" checked></input></div>
        <div><progress style="width: 10rem" value="70" max="100"></progress></div>
        <div><input type="range" style="width: 10rem" value="70" max="100"></input></div>
        <div style="color: light-dark(red,green)">light-dark(red,green)</div>
    </div>
</div>
